
import './App.css';
import React, { useState } from 'react'
import { PullToRefresh, List } from 'antd-mobile'
import { sleep } from 'antd-mobile/es/utils/sleep'
import { Route, Routes, useNavigate, useParams } from 'react-router-dom';
import User from './views/user/index'
import Login from './views/login/index'
import { Badge, TabBar } from 'antd-mobile'
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'

import SuperviseHome from './views/supervise-home/index'


function App() {

  const [activeKey, setActiveKey] = useState('supervise-home')

  let navigate = useNavigate();
  const changeTabBar = (value) => {
    console.log(value);
    setActiveKey(value);
    navigate(`/${value}`);
  }
  const tabs = [
    {
      key: 'supervise-home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: 'plan',
      title: '事项',
      icon: <UnorderedListOutline />,
      badge: '5',
    },
    {
      key: 'meeting',
      title: '会议',
      icon: (active) =>
        active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: 'statistics',
      title: '统计',
      icon: <UserOutline />,
    },
  ]


  return (
    <PullToRefresh
      onRefresh={async () => {
        await sleep(1000)
      }}
    >
      <div className="main-wrap">
        <div className="main-content-wrap">
          <div className="main-content">
            <Routes>
              <Route path='/' element={<Login />} />
              <Route path='supervise-home' element={<SuperviseHome />} />
            </Routes>
          </div>

        </div>
        <div className="main-footer">
          <TabBar safeArea activeKey={activeKey} onChange={changeTabBar}>
            {tabs.map(item => (
              <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
            ))}
          </TabBar>
        </div>

      </div>

    </PullToRefresh>
  );
}

export default App;
